<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="org-settings-role">
  <h1>
    <gio-go-back-button [ajsGo]="{ to: 'organization.settings.ng-roles' }"></gio-go-back-button>
    {{ (isEditMode ? 'Update' : 'Create') + ' role in the ' + (roleScope | titlecase) + ' scope' }}
  </h1>
  <h4>Manage CRUD (Create, Read, Update, Delete) permissions for this role {{ roleName }} in the {{ roleScope | titlecase }} scope.</h4>

  <form *ngIf="!isLoading" autocomplete="off" [formGroup]="roleForm" (ngSubmit)="onSubmit()">
    <gio-banner-info *ngIf="role.system">System role are not editable</gio-banner-info>

    <mat-card class="org-settings-role__role-card">
      <mat-form-field appearance="fill">
        <mat-label>Role name</mat-label>
        <input class="org-settings-role__role-card__field__name" matInput formControlName="name" required />
        <mat-hint>The name cannot be changed after it has been created.</mat-hint>
        <mat-error *ngIf="roleForm.get('name').hasError('required')">Name is required.</mat-error>
      </mat-form-field>

      <mat-form-field appearance="fill">
        <mat-label>Role description</mat-label>
        <input matInput formControlName="description" />
      </mat-form-field>

      <gio-form-slide-toggle appearance="fill">
        <gio-form-label>Default role</gio-form-label>
        <mat-slide-toggle gioFormSlideToggle aria-label="Default role toggle" formControlName="default"></mat-slide-toggle>
      </gio-form-slide-toggle>
    </mat-card>

    <mat-card class="org-settings-role__permissions-card" formGroupName="permissions">
      <table
        *ngIf="rolePermissionsTableDS"
        mat-table
        [dataSource]="rolePermissionsTableDS"
        id="rolePermissionsTable"
        aria-label="Role CRUD permissions table"
      >
        <!-- Name Column -->
        <ng-container matColumnDef="permissionName">
          <th mat-header-cell *matHeaderCellDef id="permissionName">Permission</th>
          <td mat-cell *matCellDef="let permission">
            <span>{{ permission.permissionName }}</span>

            <div *ngIf="permission.isMovedToOrganizationScope" class="mat-caption permission-moved">
              This permission has been moved to ORGANIZATION scope
            </div>
          </td>
        </ng-container>

        <!-- Create Column -->
        <ng-container matColumnDef="create">
          <th mat-header-cell *matHeaderCellDef id="create">
            Create
            <div>
              <mat-checkbox
                (change)="toggleAll('C', $event)"
                [disabled]="role.system"
                [checked]="selectAllCheckbox.C.state === 'checked'"
                [indeterminate]="selectAllCheckbox.C.state === 'indeterminate'"
                [aria-label]="selectAllCheckbox.C.label"
              >
              </mat-checkbox>
            </div>
          </th>
          <td mat-cell *matCellDef="let permission" [formGroupName]="permission.permissionName">
            <mat-checkbox formControlName="C"></mat-checkbox>
          </td>
        </ng-container>

        <!-- Read Column -->
        <ng-container matColumnDef="read">
          <th mat-header-cell *matHeaderCellDef id="read">
            Read
            <div>
              <mat-checkbox
                (change)="toggleAll('R', $event)"
                [disabled]="role.system"
                [checked]="selectAllCheckbox.R.state === 'checked'"
                [indeterminate]="selectAllCheckbox.R.state === 'indeterminate'"
                [aria-label]="selectAllCheckbox.R.label"
              >
              </mat-checkbox>
            </div>
          </th>
          <td mat-cell *matCellDef="let permission" [formGroupName]="permission.permissionName">
            <mat-checkbox formControlName="R"></mat-checkbox>
          </td>
        </ng-container>

        <!-- Update Column -->
        <ng-container matColumnDef="update">
          <th mat-header-cell *matHeaderCellDef id="update">
            Update
            <div>
              <mat-checkbox
                (change)="toggleAll('U', $event)"
                [disabled]="role.system"
                [checked]="selectAllCheckbox.U.state === 'checked'"
                [indeterminate]="selectAllCheckbox.U.state === 'indeterminate'"
                [aria-label]="selectAllCheckbox.U.label"
              >
              </mat-checkbox>
            </div>
          </th>
          <td mat-cell *matCellDef="let permission" [formGroupName]="permission.permissionName">
            <mat-checkbox formControlName="U"></mat-checkbox>
          </td>
        </ng-container>

        <!-- Delete Column -->
        <ng-container matColumnDef="delete">
          <th mat-header-cell *matHeaderCellDef id="delete">
            Delete
            <div>
              <mat-checkbox
                (change)="toggleAll('D', $event)"
                [disabled]="role.system"
                [checked]="selectAllCheckbox.D.state === 'checked'"
                [indeterminate]="selectAllCheckbox.D.state === 'indeterminate'"
                [aria-label]="selectAllCheckbox.D.label"
              >
              </mat-checkbox>
            </div>
          </th>
          <td mat-cell *matCellDef="let permission" [formGroupName]="permission.permissionName">
            <mat-checkbox formControlName="D"></mat-checkbox>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="rolePermissionsTableDisplayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: rolePermissionsTableDisplayedColumns"></tr>

        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" [attr.colspan]="rolePermissionsTableDisplayedColumns.length">No permission</td>
        </tr>
      </table>
    </mat-card>

    <gio-save-bar [creationMode]="!isEditMode" [form]="roleForm" [formInitialValues]="initialRoleFormValue"></gio-save-bar>
  </form>
</div>
